const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const  vueLoaderPlugin=require("vue-loader/lib/plugin");
//参考官方文档 https:vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
    // . Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,
module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js"
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),
            filename: "index.html"
        }),
        //引入vue-loader伴生的插件，这一步不可缺少
        new vueLoaderPlugin()
    ],
  module:{
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]},
            {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]},
            {test:/\.vue$/,use:"vue-loader"},
            //下面这一步这是因为mui中的字体文件无法打包
            {test:/\.ttf$/,use:"file-loader"},
            //这里的.svg文件是vue2-preview缩略图中的文件，必须声明，否则报错
            {test:/\.(svg|png|jpg|gif)$/,use:'url-loader?limit=5000&name=[hash:8]-[name].[ext]'},
            //这是处理scss中的url地址文件,安装url-loader，和file-loader。
            //limit的单位是byte，图片字节数大于等于limit的值时，图片不会被解析为base64格式
            //name设置图片被解析后的名字格式，[name]表示保持图片原有名称，.[ext]表示保持文件原有后缀名，
            // [hash:8]是为了区分不同文件同名的情况。
            
        ]
  },
    //这个属性用来修改vue/dist/package.josn中main默认的导入文件的路径
    resolve: {
        alias:{
            "vue$":"vue/dist/vue.js"
        }
    }
};